<template>
  <div>
    <top-bar title="心理咨询预约中心" bgc="background-color:#ff0000; color: #fff"></top-bar>
    <van-sidebar v-model="activeKey" @change="onChange" style="float: left;">
      <van-sidebar-item title="辅导老师" />
      <van-sidebar-item title="我的预定" />
      <!-- <van-sidebar-item title="我要评分" /> -->
    </van-sidebar>

    <van-pull-refresh v-model="isLoading" @refresh="pullDown">
      <van-list
        style="margin-bottom: 15vh; width: calc(100vw - 80px); float: right;"
        v-model="loading"
        :finished="completed"
        :immediate-check="false"
        finished-text="没有更多了"
        loading-text="拼命加载中..."
        @load="pullUp"
      >
        <van-swipe-cell v-for="item in heartList" :key="item._id">
          <van-card
            :num="item.appointCount"
            :price="item.price +'.00'"
            :tag="item.stars + '星'"
            :desc="item.desc"
            :title="item.name"
            :thumb="item.avatar"
          >
            <template #tags>
              <van-tag
                v-for="(items, index) in item.tags"
                :key="index"
                style="margin-right: 2px;"
                plain
                type="danger"
              >{{items}}</van-tag>
            </template>
            <template #footer>
              <van-button v-if="activeKey === 0" size="mini" @click="addAppoint(item)">预约</van-button>
              <van-button
                v-if="activeKey === 1"
                size="mini"
                @click="changeStatus(item)"
              >{{item.status | statusFilter}}</van-button>
              <van-button size="mini">查看</van-button>
            </template>
          </van-card>
          <template #right v-if="item.status > 3">
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delClick(item)"
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
    <van-dialog
      use-slot
      title="为我们点个五星好评鸭"
      style="height: 25vh"
      v-model="starShow"
      showCancelButton
      @confirm="starStatus"
      @close="resetStatusVisible"
    >
      <van-row style="text-align: center; margin: 20px 0;">
        <van-rate v-model="starsValue" icon="like" void-icon="like-o" />
      </van-row>
    </van-dialog>
    <van-popup v-model="showDatePopup" position="bottom" style="height:'40vh;'">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择完整时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="addClick"
        @cancel="resetClick"
      />
    </van-popup>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
import { mapState } from "vuex";
export default {
  components: {
    TopBar
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      activeKey: 0,
      heartList: [],
      pageSize: 10,
      pageNum: 1,
      loading: false,
      completed: false,
      isLoading: false,
      finished: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      showDatePopup: false,
      starShow: false,
      starsValue: 0,
      editRateId: ""
    };
  },
  mounted() {
    this.getList();
  },
  filters: {
    statusFilter(status) {
      if (status == 1) return "审核中, 可撤销预约";
      if (status == 2) return "可约见";
      if (status == 3) return "待评价";
      if (status == 4) return "撤回，重新提交";
      if (status == 5) return "未通过, 重新提交";
      if (status == 6) return "已完成，重新提交";
    }
  },
  methods: {
    onChange(index) {
      if (index === 0) {
        this.pageNum = 1;
        this.heartList = [];
        this.getList();
      } else if (index === 1) {
        this.pageNum = 1;
        this.heartList = [];
        this.getMyList();
      }
    },
    getList() {
      this.$api
        .get("/api/heart/teacher/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            status: 1
          }
        })
        .then(res => {
          this.heartList.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        });
    },
    getMyList() {
      this.$api
        .get("/api/heart/appoint/list", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            number: this.number
          }
        })
        .then(res => {
          this.heartList.push(...res.data.data.records);
          this.loading = false;
          if (this.pageSize * this.pageNum > res.data.data.total) {
            this.completed = true;
          }
          this.isLoading = false;
        });
    },
    addAppoint(item) {
      item.appointCount++;
      this.showDatePopup = true;
      this.addForm = item;
    },
    changeStatus(item) {
      if (item.status == "1") {
        // 撤销
        this.backStatus(item._id);
        // 约见
      } else if (item.status == "2") {
        this.appointStatus(item._id);
        // 评价
      } else if (item.status == "3") {
        this.starStatusVisible(item);
        // 重新
      } else if (item.status == "4") {
        this.readdStatus(item._id);
        // 重新
      } else if (item.status == "5") {
        this.readdStatus(item._id);
      }
    },
    backStatus(id) {
      this.$api.post(`/api/heart/appoint/${id}/back`).then(res => {
        this.init();
      });
    },
    appointStatus(id) {
      console.log(111);
    },
    starStatusVisible(item) {
      this.editRateId = item._id;
      this.starShow = true;
    },
    resetStatusVisible() {
      this.starsValue = 0;
      this.starShow = false;
    },
    starStatus() {
      this.$api
        .post(`/api/heart/appoint/${this.editRateId}/stars`, {
          stars: this.starsValue
        })
        .then(res => {
          this.$message.success("评价成功");
          this.starShow = false;
          this.init();
        });
    },
    init() {
      this.heartList = [];
      this.pageNum = 1;
      this.getMyList();
    },
    readdStatus(id) {
      this.$api.post(`/api/heart/appoint/${id}/submit`).then(res => {
        this.init();
      });
    },
    resetClick() {
      this.showDatePopup = false;
    },
    addClick() {
      let params = {};
      params.teachername = this.addForm.name;
      delete this.addForm.name;
      console.log(this.addForm);
      params = {
        ...params,
        ...this.userInfo,
        ...{ appointTime: this.currentDate.getTime() },
        ...this.addForm
      };
      console.log(params);

      this.$api.post("/api/heart/appoint/add", params).then(res => {
        this.$message.success("预约成功");
        this.showDatePopup = false;
      });
    },
    // 上滑加载
    pullUp() {
      if (this.completed) {
        return;
      }
      this.pageNum++;
      if (this.activeKey === 0) {
        this.getList();
      } else if (this.activeKey === 1) {
        this.getMyList();
      }
    },
    // 下拉刷新
    pullDown() {
      this.pageNum = 1;
      this.heartList = [];
      this.completed = false;
      this.isLoading = true;
      if (this.activeKey === 0) {
        this.getList();
      } else if (this.activeKey === 1) {
        this.getMyList();
      }
    },
    delClick(item) {
      this.$api.delete(`/api/heart/appoint/delete/${item._id}`).then(res => {
        this.$message.success("删除成功");
        this.init();
      });
    }
  }
};
</script>

<style scoped>
.delete-button {
  height: 100%;
}
</style>